<template>
    <div class="notFound">
        <img src="../../assets/images/404.jpg">
        <div class="backTime"><span style="color: #ff5722;">{{time}}</span>&nbsp;秒后返回首页</div>
    </div>
</template>

<script>
    import { mapState } from "vuex";

    export default {
        name: "NotFound",
        data () {
            return {
                time: "3",                                        // 时间
            }
        },

        computed: {
            ...mapState(['navList'])
        },

        methods: {
            // 设置返回首页的时间
            setBackTime () {
                let that = this;
                let time = 3;
                let timer = setInterval(() => {
                    if (time > 0) {
                        time = time - 1;
                    }

                    if (time <= 0) {
                        time = 0;

                        // 关闭定时器
                        clearInterval(timer);

                        // 删除404页面的导航
                        let oldUrl = that.$route.path;
                        
                        that.$store.commit("removeNotPage", oldUrl);

                        // 回到首页
                        that.$router.push({
                            path: "/Home"
                        })
                    }

                    that.time = time;
                }, 1000)
            }
        },

        created () {
            this.setBackTime();
        }
    }
</script>

<style scoped>
    .notFound {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: #f4f5f7;
    }

    .notFound > img {
        display: block;
        margin: 50px auto 0 auto;
    }

    .notFound .backTime {
        text-align: center;
        line-height: 30px;
    }
</style>